<template>
	<view class="mb_33">
		<view class="invite_box box bc_fff br_6 mt_12">
			<view class="fc_333 fz_16 fb mt_10 box mb_2">
				邀请数据概况
			</view>
			<view class="invite_content">
				<view class="single width_160 height_60 br_4 mt_8 box">
					<view class="fz-12 fc_333">
						分享商品次数（次）
					</view>
					<view class="fz_16 fc_333 fb mt_4">
						1026
					</view>
				</view>
				<view class="single width_160 height_60 br_4 mt_8 box">
					<view class="fz-12 fc_333">
						收藏商品数（次）
					</view>
					<view class="fz_16 fc_333 fb mt_4">
						1026
					</view>
				</view>
				<view class="single width_160 height_60 br_4 mt_8 box">
					<view class="fz-12 fc_333">
						购买商品数（次）
					</view>
					<view class="fz_16 fc_333 fb mt_4">
						1026
					</view>
				</view>
				<view class="single width_160 height_60 br_4 mt_8 box">
					<view class="fz-12 fc_333">
						加购商品（次）
					</view>
					<view class="fz_16 fc_333 fb mt_4">
						1026
					</view>
				</view>
				<view class="single width_160 height_60 br_4 mt_8 box">
					<view class="fz-12 fc_333">
						浏览商品数（次）
					</view>
					<view class="fz_16 fc_333 fb mt_4">
						1026
					</view>
				</view>
				<view class="single width_160 height_60 br_4 mt_8 box">
					<view class="fz-12 fc_333">
						邀请注册数（次）
					</view>
					<view class="fz_16 fc_333 fb mt_4">
						1026
					</view>
				</view>
			</view>
		</view>
		<view class="range_box box mt_12 bc_fff br_6">
			<view class="range_header">
				<view class="fz_16 fb">
					邀请数据排行
				</view>
				<view class="chhoose_box box width_108 height_29 br_8">
					<view class="fz_12">
						分享商品次数
					</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<view class="range_list">
				<view class="single_list box w100 height_44">
					<view class="list_left">
						<view class="width_36 mr_16">
							<image src="../../../../static/images/range_1.png" class="width_36 height_36" mode="">
							</image>
						</view>
						<view class="width_30 height_30 br_15 mr_8">
		
						</view>
						<view class="fz_14 fc_333">
							张思
						</view>
					</view>
					<view class="list_right fz_14">
						355
					</view>
				</view>
				<view class="single_list box w100 height_44">
					<view class="list_left">
						<view class="width_36 mr_16">
							<image src="../../../../static/images/range_2.png" class="width_36 height_36" mode="">
							</image>
						</view>
						<view class="width_30 height_30 br_15 mr_8">
		
						</view>
						<view class="fz_14 fc_333">
							张思
						</view>
					</view>
					<view class="list_right fz_14">
						355
					</view>
				</view>
				<view class="single_list box w100 height_44">
					<view class="list_left">
						<view class="width_36 mr_16">
							<image src="../../../../static/images/range_3.png" class="width_36 height_36" mode="">
							</image>
						</view>
						<view class="width_30 height_30 br_15 mr_8">
		
						</view>
						<view class="fz_14 fc_333">
							张思
						</view>
					</view>
					<view class="list_right fz_14">
						355
					</view>
				</view>
				<view class="single_list box w100 height_44 color_list">
					<view class="list_left">
						<view class="width_36 mr_16 fz_14 fb fc">
							4
						</view>
						<view class="width_30 height_30 br_15 mr_8">
		
						</view>
						<view class="fz_14 fc_333">
							张思
						</view>
					</view>
					<view class="list_right fz_14">
						355
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.invite_box {
		@include set_padding(8rpx, 8rpx);
	
		.invite_content {
			@include flex_box(row, wrap, space-between, center);
	
			.single {
				@include set_padding(8rpx, 8rpx);
				background-color: #F5F7FB;
				@include flex_box(column, nowrap, center, flex-start);
			}
		}
	}
	
	.range_box {
		background-color: #fff;
	
		.range_header {
			color: #1D2129;
			@include set_padding(8rpx, 12rpx);
			@include flex_box(row, nowrap, space-between, center);
	
			.chhoose_box {
				@include set_padding(0rpx, 8rpx);
				@include flex_box(row, nowrap, space-between, center);
				border: 1px solid rgba(0, 0, 0, 0.1);
				color: #999999;
			}
		}
	
		.range_list {
			.single_list {
				@include set_padding(0rpx, 12rpx);
				@include flex_box(row, nowrap, space-between, center);
	
				.list_left {
					@include flex_box(row, nowrap, flex-start, center);
				}
	
				.list_right {
					color: #DE3F26;
				}
			}
			.color_list{
				background-color: #F9F8F9;
			}
		}
	}
</style>